<template>
  <div class="home">
    <div class="wx-icon" v-for="(item, index) in iconArr" :key="index + 'a'" :style="{ top: item.top, left: item.left }">
      <ion-icon :name="item.name" @click="openHandle(item)"></ion-icon>
      <span class="title">{{ item.title }}</span>
    </div>
    <wx-com v-if="!openWx"></wx-com>
    <div class="bottom"></div>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity';
import WxCom from './wx/index.vue';
export default {
  setup() {
    let iconArr = [
      {
        name: 'desktop-outline',
        top: '30px',
        left: '30px',
        title: '电脑'
      },
      {
        name: 'logo-wechat',
        top: '90px',
        left: '30px',
        title: '微信'
      }
    ];
    let openWx = ref(false);
    const openHandle = (item) => {
      if (item.title == '微信') {
        openWx.value = true;
      }
    };
    return {
      iconArr,
      openWx,
      openHandle
    };
  },
  components: {
    WxCom
  }
};
</script>

<style scoped lang="scss">
.fx {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.text-el {
  display: -webkit-box; /*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 2; /*设置多少行*/
  -webkit-box-orient: vertical; /*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
  overflow: hidden; /*文本会被修剪，并且剩余的部分不可见*/
  text-overflow: ellipsis; /*显示省略号来代表被修剪的文本*/
}
.home {
  width: 1000px;
  height: 800px;
  margin: 50px auto;
  background: #dee4e4;
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  .wx-icon {
    position: absolute;
    width: 50px;
    @extend .fx;
    .title {
      width: 50px;
      font-size: 12px;
      text-align: center;
      @extend .text-el;
    }
  }
  .bottom {
    width: 100%;
    height: 50px;
    background: #ccc;
    position: absolute;
    bottom: 0;
  }
}
</style>
